import type {
    Component,
    ConfigItem,
    DescCompoundType,
    resourcesList,
} from "../../../../../../component";
import type { JH } from "../../../../test/run";
//, DescCompoundType<JQueryStatic, JQuery<HTMLElement>>
export class Banner
    implements Component<JQueryStatic, JH> {
    pack() {
        console.log("packing....");
    }
    getName() {
        return "banner";
    }
    getJs(): (
        | { type: "file"; path: string }
        | { type: "element"; selector: string }
    )[] {
        return [
        ];
    }
    getCss(): (
        | { type: "file"; path: string }
        | { type: "element"; selector: string }
    )[] {
        return [
            {
                type: "file",
                path: "res/css/index.css",
            },
        ];
    }
    afterLoad(
        $: JQueryStatic,
        dom: JH,
        resources: resourcesList[],
        domSelector: string
    ) {
        Array.from(dom.find("img")).forEach((val) => {
            const name = $(val).attr("src");

            const dest =
                resources.find((val) => val.after.name === domSelector + name)?.after
                    .val
            dest &&
                $(val).attr("src", dest);
        });
        Array.from(dom.find("video")).forEach((val) => {
            const name = $(val).attr("src");

            const dest =
                resources.find((val) => val.after.name === domSelector + name)?.after
                    .val
            dest &&
                $(val).attr("src", dest);
        });
    }
    //, DescCompoundType<JQueryStatic, JQuery<HTMLElement>>
    config(
        configArr: ConfigItem<JQueryStatic, JH>[],
        resources: resourcesList[]
    ) {
        configArr.push({
            domSelector: "DOMSELECTOR",
            desc: [
                {
                    name: "修改按钮图片",
                    value: "",
                    inputType: "resources",
                    onchange($, ele, val, baseUrl) {
                        const imgs = ele.find('.btnBox img')
                        for (let i = 0; i < val.length; i++) {
                            $(imgs[i]).attr("src", baseUrl + val[i]);
                        }
                    },
                }
            ],
            trigger: ($: JQueryStatic, domSelector: string) => {
                return $(domSelector).find(".btnBox");
            },
        })
        configArr.push({
            domSelector: "DOMSELECTOR",
            desc: [
                {
                    name: "修改首图",
                    value: "",
                    inputType: "resources",
                    onchange($, ele, val, baseUrl) {
                        for (let i = 0; i < val.length; i++) {
                            if (/mp4$/.test(val[i])) {
                                ele
                                    .find(".bannerVid")
                                    .attr("src", baseUrl + val[i]);
                            } else {
                                ele
                                    .find(".banner")
                                    .attr("src", baseUrl + val[i]);
                            }
                        }
                    },
                },
                {
                    name: "添加按钮",
                    value: '3',
                    inputType: "text",
                    onchange($, ele, val) {
                        const num = Number(val.value) - ele.find(".btnBox button").length
                        if (num > 0) {
                            const but = ele.find(".btnTemplate")
                            for (let i = 0; i < num; i++) {
                                const box = ele.find(".btnBox")
                                box.append(but.clone().attr("style", '').removeClass("btnTemplate"))
                            }
                        }
                        else {
                            for (let i = 0; i > num; i--) {
                                ele.find(".btnBox button:nth-of-type(1)").remove()
                            }
                        }
                    }
                },
                {
                    name: "展示按钮",
                    value: "true",
                    inputType: "checkbox",
                    onchange($, ele, val) {
                        if (val.checked)
                            ele.find(".btnBox").removeAttr("style")
                        else
                            ele.find(".btnBox").attr("style", "display: none")
                    },
                }
            ],
            trigger: ($: JQueryStatic, domSelector: string) => {
                return $(domSelector).find("video");
            },
        });
    }
    require() {
        return {
            banner: "./res/img/1.jpg",
            bannerVid: "./res/img/6.mp4",
            btn1: "./res/img/btn1.png",
            btn2: "./res/img/btn1-h.png",
            btn3: "./res/img/btn2.png",
            btn4: "./res/img/btn2-h.png",
            btn5: "./res/img/btn3.png",
            btn6: "./res/img/btn3-h.png",
        };
    }
}
